<!-- =======================================================
  * Author: Jéssica Yang
  ======================================================== -->

<template>
  <div>
    <!--搜索报表筛选表单-->
    <el-form :inline="true">
      <!--报表搜索输入框-->
      <el-form-item prop="searchReport">
        <el-input v-model="temName" suffix-icon="el-icon-search" placeholder="请输入模板名" clearable></el-input>
      </el-form-item>
      <!--搜索按钮-->
      <el-form-item >
        <el-button type="primary" icon="el-icon-search" @click="load">搜索</el-button>
      </el-form-item>
    </el-form>

    <!--模板列表表格-->
    <el-table :data="tableData" :max-height="tableHeight">
      <!--表头-->
      <el-table-column type="index" width="40" align="center"></el-table-column>
      <el-table-column prop="temName" label="模板名" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <div class="operation_show" slot-scope="scope" >
          <!--查看当前模板完成率按钮-->
          <el-button type="success" icon="el-icon-info" @click="getRate(scope.row.id)">查看完成率</el-button>
          <!--对当前模板进行管理操作按钮-->
          <el-button type="success" icon="el-icon-s-custom" @click="jump(scope.row.id)">进入管理</el-button>
        </div>
      </el-table-column>
    </el-table>

    <el-dialog title="完成率" :visible.sync="ViewFormVisible" width="60%" style="text-align: center" >
      <div id="echart" style="width: 600px;height:400px;"></div>
    </el-dialog>
    <!--分页块-->
    <div>
      <el-pagination
          style="margin-top: 10px"
          align="center"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagenum"
          :page-sizes="[10,20,30,40,50]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
export default {
  name: "ReportList",
  data(){
    return{
      currentPage:1,
      total:0,
      temName:'',
      pagenum:1,
      pagesize:10,
      tableData:[],
      tableHeight:"",
      rate: null,
      ViewFormVisible:false
    }
  },
  created() {
    this.load()
    this.getTableHeight(); //网页创建时获得表格高度
  },
  mounted() {
    //挂载window.onresize事件(动态设置table高度)
    let _this = this;
    window.onresize = () => {
      if (_this.resizeFlag) {
        clearTimeout(_this.resizeFlag);
      }
      _this.resizeFlag = setTimeout(() => {
        _this.getTableHeight();
        _this.resizeFlag = null;
      }, 100);
    };
  },
  methods: {
    load() {
      this.request.get("/template/findAll/" + this.pagenum + "/" + this.pagesize + "/" + this.$store.state.id + "/" + this.temName)
          .then(res => {
            this.tableData = res.data.data.records
            this.total = res.data.data.total
          })
    },

    //获取完成率数据，利用setTimeout等dom渲染完之后，再使用echarts.
    getRate(id){
      this.request.get("/template/getRate/" + id).then(res => {
        console.log(res)
        this.unfill = res.data.data.unfill
        this.uncheck = res.data.data.uncheck
        this.pass = res.data.data.pass
        this.unpass = res.data.data.unpass
        this.ViewFormVisible = true
          setTimeout(() =>{
            this.openEchart()
          },100)
    })
    },

    //echart饼状图
    openEchart(){
      let myChart = this.$echarts.init(document.getElementById("echart"));
      // 指定图表的配置项和数据
      let option = {
        series: [
            {
              type: 'pie',
              radius: '40%',
              data: [{
                value: this.unfill,
                name: '未完成报表个数'
              },
                {
                  value: this.uncheck,
                  name: '未审核报表个数'
                },
                {
                  value: this.pass,
                  name: '通过报表个数'
                },
                {
                  value: this.unpass,
                  name: '退回报表个数'
                },
              ],
            }],
        //设置显示百分比样式
        label: {
          show: true,
          position: "outside",
          formatter: '{b} : {c} ({d}%)'
        },
      }
      this.$nextTick(() => {
        myChart.setOption(option, true);
      })
    },

    jump(id) {
      this.$router.push({
        name: 'ReportManage',
        params: {
          id: id,
        }
      })
    },

    //分页查询
    handleSizeChange(pagesize){   //每页条数改变时触发
      console.log(pagesize)
      this.pagesize = pagesize
      this.load()
    },
    handleCurrentChange(pagenum){   //当前页码改变时触发
      console.log(pagenum)
      this.pagenum = pagenum
      this.load()
    },

    //计算table高度(动态设置table高度)
    getTableHeight(){
      let tableH = 206; //距离页面下方的高度
      let tableHeightDetil = window.innerHeight - tableH;
      if (tableHeightDetil <= 300) {
        this.tableHeight = 300;
      } else {
        this.tableHeight = window.innerHeight - tableH;
      }
    }
  }
}

</script>

<style scoped>

/*将表格操作列设为光标停留时显示*/
.operation_show{
  display: none;
}
.el-table__body tr:hover > td .operation_show{
  display: block;
}

</style>